import { Form, Input, Modal, Row, Col, Button, message } from 'antd';
import { useState } from 'react';
// import { useTranslation } from 'react-i18next';

import { DEFAULT_USER } from '@/_mock/assets';
import commonService from '@/api/services/commonService';
import { useSignIn, useShowLogin, useUserActions } from '@/store/userStore';

export function LoginModal() {
  const showLogin = useShowLogin();
  const action = useUserActions();

  // const { t } = useTranslation();

  const [text, setText] = useState('发送验证码');
  const [count, setCount] = useState(60);
  const qrcode =
    'https://open.weixin.qq.com/connect/qrconnect?appid=wx871e0bb5757a8a4c&redirect_uri=https%3A%2F%2Futfront.uniqtee.com%2F%23%2Fcallback&response_type=code&scope=snsapi_login&state=#wechat_redirect';

  const [form] = Form.useForm();

  const signIn = useSignIn();

  const [loading, setLoading] = useState(false);

  const sendCode = () => {
    const { mobile } = form.getFieldsValue();
    if (count === 60) {
      commonService.getCustomApi('/sendCode', { mobile }).then(() => {
        countDown(60);
      });
    } else {
      message.error('请稍后再试');
    }
  };

  const countDown = (val: number) => {
    if (val > 0) {
      setCount(val);
      setText(`${val}秒重试`);
      setTimeout(() => {
        countDown(val - 1);
      }, 1000);
    } else {
      setCount(60);
      setText('发送验证码');
    }
  };

  const OnCancel = () => {
    action.setShowLogin(false);
  };

  const handleFinish = async () => {
    await form.validateFields();
    const { mobile, code } = form.getFieldsValue();
    setLoading(true);
    try {
      await signIn({ mobile, code });
    } finally {
      action.setShowLogin(false);
      setLoading(false);
    }
  };

  return (
    <Modal
      title="登录"
      open={showLogin}
      loading={loading}
      onCancel={OnCancel}
      width={800}
      okText="登录"
      onOk={() => handleFinish()}
      centered
    >
      <Form
        name="login"
        size="large"
        form={form}
        initialValues={{
          remember: true,
          mobile: DEFAULT_USER.mobile,
          code: DEFAULT_USER.code,
        }}
      >
        <Row>
          <Col span={12}>
            <div className="flex h-[440px] items-center justify-center">
              <iframe title="微信登录" src={qrcode} width={300} height={440} frameBorder="0" />
            </div>
          </Col>
          <Col span={12}>
            <div className="mb-[80px] text-[24px]">验证码登录</div>
            <Form.Item name="mobile" rules={[{ required: true, message: '请输入手机号' }]}>
              <Input placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item name="code" rules={[{ required: true, message: '请输入验证码' }]}>
              <Input
                className="flex-1"
                placeholder="请输入验证码"
                suffix={
                  <Button size="middle" type="primary" onClick={sendCode}>
                    {text}
                  </Button>
                }
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}
